<template>
  <div class="mock-debug-panel" v-if="isDev">
    <div class="panel-header">
      <h3>🎭 Mock 调试面板</h3>
      <button class="close-btn" @click="togglePanel">×</button>
    </div>
    
    <div class="panel-content" v-if="isExpanded">
      <!-- Mock 状态控制 -->
      <div class="control-section">
        <div class="control-item">
          <label>Mock 状态:</label>
          <span :class="['status-badge', statusClass]">{{ statusText }}</span>
          <button @click="toggleMock" class="toggle-btn">
            {{ isMockEnabled ? '禁用' : '启用' }}Mock
          </button>
        </div>
        
        <div class="control-item">
          <label>API延迟 (ms):</label>
          <input 
            type="range" 
            min="0" 
            max="3000" 
            step="100"
            v-model="mockDelay"
            @change="updateMockDelay"
          />
          <span class="delay-value">{{ mockDelay }}ms</span>
        </div>
      </div>
      
      <!-- 数据操作 -->
      <div class="control-section">
        <h4>数据操作</h4>
        <div class="button-group">
          <button @click="resetMockData" class="action-btn">
            重置模拟数据
          </button>
          <button @click="refreshPage" class="action-btn">
            刷新页面
          </button>
        </div>
      </div>
      
      <!-- 快速测试 -->
      <div class="control-section">
        <h4>快速测试</h4>
        <div class="test-buttons">
          <button @click="testLogin" class="test-btn">测试登录</button>
          <button @click="testError" class="test-btn">测试错误</button>
          <button @click="testSlow" class="test-btn">测试慢速</button>
        </div>
      </div>
      
      <!-- 统计信息 -->
      <div class="control-section">
        <h4>Mock 统计</h4>
        <div class="stats">
          <div class="stat-item">
            <span class="stat-label">用户数量:</span>
            <span class="stat-value">{{ mockStats.users }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">案件数量:</span>
            <span class="stat-value">{{ mockStats.cases }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">律师数量:</span>
            <span class="stat-value">{{ mockStats.lawyers }}</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 折叠时的显示 -->
    <div class="panel-collapsed" v-else @click="togglePanel">
      <span class="mock-indicator" :class="statusClass">🎭</span>
      <span class="mock-text">Mock {{ isMockEnabled ? '已启用' : '已禁用' }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import { ElMessage } from 'element-plus';

// 响应式数据
const isExpanded = ref(false);
const isMockEnabled = ref(true);
const mockDelay = ref(500);
const mockStats = ref({
  users: 0,
  cases: 0,
  lawyers: 0
});

// 计算属性
const isDev = computed(() => import.meta.env.DEV);
const statusText = computed(() => 
  isMockEnabled.value ? '已启用' : '已禁用'
);
const statusClass = computed(() => 
  isMockEnabled.value ? 'enabled' : 'disabled'
);

// 切换面板展开状态
const togglePanel = () => {
  isExpanded.value = !isExpanded.value;
};

// 切换 Mock 状态
const toggleMock = async () => {
  try {
    const { toggleMock } = await import('@/mock');
    toggleMock();
    isMockEnabled.value = !isMockEnabled.value;
    ElMessage.success(`Mock ${isMockEnabled.value ? '启用' : '禁用'}成功`);
  } catch (error) {
    console.error('Mock 切换失败:', error);
    ElMessage.error('Mock 切换失败');
  }
};

// 更新 Mock 延迟
const updateMockDelay = async () => {
  try {
    const { setMockDelay } = await import('@/mock');
    setMockDelay(mockDelay.value);
    ElMessage.success(`延迟设置为 ${mockDelay.value}ms`);
  } catch (error) {
    console.error('延迟设置失败:', error);
    ElMessage.error('延迟设置失败');
  }
};

// 重置 Mock 数据
const resetMockData = async () => {
  try {
    const { resetMockData } = await import('@/mock');
    resetMockData();
    ElMessage.success('Mock 数据已重置');
    updateMockStats();
  } catch (error) {
    console.error('数据重置失败:', error);
    ElMessage.error('数据重置失败');
  }
};

// 刷新页面
const refreshPage = () => {
  if (confirm('确定要刷新页面吗？')) {
    window.location.reload();
  }
};

// 测试登录
const testLogin = async () => {
  try {
    const api = await import('@/utils/request');
    const response = await api.default.post('/auth/login', {
      username: 'testuser',
      password: '123456'
    });
    ElMessage.success('登录测试成功');
    console.log('登录测试结果:', response);
  } catch (error) {
    ElMessage.error('登录测试失败');
    console.error('登录测试错误:', error);
  }
};

// 测试错误
const testError = async () => {
  try {
    const api = await import('@/utils/request');
    await api.default.get('/non-existent-endpoint');
  } catch (error) {
    ElMessage.info('错误测试完成');
    console.log('错误测试结果:', error);
  }
};

// 测试慢速
const testSlow = async () => {
  const originalDelay = mockDelay.value;
  mockDelay.value = 2000;
  await updateMockDelay();
  
  try {
    const api = await import('@/utils/request');
    await api.default.get('/users');
    ElMessage.success('慢速测试完成');
  } catch (error) {
    ElMessage.error('慢速测试失败');
  } finally {
    mockDelay.value = originalDelay;
    await updateMockDelay();
  }
};

// 更新 Mock 统计信息
const updateMockStats = async () => {
  try {
    const api = await import('@/utils/request');
    
    // 获取用户统计
    const userStats = await api.default.get('/users/stats');
    mockStats.value.users = userStats.total || 0;
    
    // 获取案件统计
    const caseStats = await api.default.get('/cases/stats');
    mockStats.value.cases = caseStats.total || 0;
    
    // 获取律师统计
    const lawyerStats = await api.default.get('/lawyers/stats');
    mockStats.value.lawyers = lawyerStats.total || 0;
  } catch (error) {
    console.error('获取统计信息失败:', error);
  }
};

// 监听延迟变化
watch(mockDelay, (newDelay) => {
  localStorage.setItem('mock_delay', newDelay);
});

// 组件挂载时初始化
onMounted(() => {
  // 从 localStorage 恢复设置
  const savedDelay = localStorage.getItem('mock_delay');
  if (savedDelay) {
    mockDelay.value = parseInt(savedDelay);
  }
  
  // 更新统计信息
  updateMockStats();
  
  // 定期更新统计信息
  setInterval(updateMockStats, 10000);
});
</script>

<style scoped>
.mock-debug-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 320px;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 8px 8px 0 0;
}

.panel-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.close-btn:hover {
  background: #e0e0e0;
  color: #333;
}

.panel-content {
  padding: 16px;
  max-height: 400px;
  overflow-y: auto;
}

.control-section {
  margin-bottom: 20px;
}

.control-section h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.control-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px;
}

.control-item label {
  min-width: 80px;
  font-weight: 500;
  color: #555;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.enabled {
  background: #e8f5e8;
  color: #2e7d32;
}

.status-badge.disabled {
  background: #ffebee;
  color: #c62828;
}

.toggle-btn {
  background: #1976d2;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
}

.toggle-btn:hover {
  background: #1565c0;
}

input[type="range"] {
  flex: 1;
  margin: 0 8px;
}

.delay-value {
  min-width: 50px;
  text-align: right;
  font-weight: 500;
  color: #666;
}

.button-group {
  display: flex;
  gap: 8px;
}

.action-btn {
  background: #f5f5f5;
  color: #333;
  border: 1px solid #ddd;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  flex: 1;
}

.action-btn:hover {
  background: #e0e0e0;
}

.test-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.test-btn {
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #ffcc02;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  text-align: left;
}

.test-btn:hover {
  background: #ffe0b2;
}

.stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 4px;
}

.stat-label {
  font-weight: 500;
  color: #555;
}

.stat-value {
  font-weight: 600;
  color: #1976d2;
}

.panel-collapsed {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  background: #f8f9fa;
  border-radius: 8px;
}

.panel-collapsed:hover {
  background: #e9ecef;
}

.mock-indicator {
  font-size: 16px;
}

.mock-indicator.enabled {
  color: #2e7d32;
}

.mock-indicator.disabled {
  color: #c62828;
}

.mock-text {
  font-weight: 500;
  color: #333;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .mock-debug-panel {
    width: 280px;
    right: 10px;
    bottom: 10px;
  }
  
  .panel-content {
    padding: 12px;
  }
  
  .control-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .control-item label {
    min-width: auto;
  }
}
</style> 